<template>
  <div class="CeremonyHall  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="结算时间:">
            <el-date-picker type="date" placeholder="选择时间" v-model="ruleForm.settleStartTime"
                            format="yyyy-MM-dd"></el-date-picker>
            -
            <el-date-picker type="date" placeholder="选择时间" v-model="ruleForm.settleEndTime"
                            format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="逝者姓名:" prop="deadName">
            <el-input v-model="ruleForm.deadName" clearable></el-input>
          </el-form-item>
          <el-form-item label="证件号码:" prop="certificateNo">
            <el-input v-model="ruleForm.certificateNo" clearable></el-input>
          </el-form-item>

          <el-form-item label="减免类型:" prop="exemptionTypeCode">
            <el-select v-model="ruleForm.exemptionTypeCode" onkeydown="return (event.keyCode!=8)" placeholder="请选择">
              <el-option label="全部" value="-1"></el-option>
              <el-option
                v-for="item in dictionary.exemption_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" v-if="btnRight.btnExemptionSearch" @click="onSubmit('search')">查询
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" size="mini" plain v-if="btnRight.btnExemptionExport" @click="openExecl">导出Excel
            </el-button>
          </el-form-item>
        </el-row>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight">
          <el-table-column
            prop="appointmentDate"
            align='center'
            label="火化日期"
            width="200">
          </el-table-column>
          <el-table-column
            prop="dataText"
            align='center'
            label="减免类型"
            width="200">
          </el-table-column>
          <el-table-column
            prop="deadName"
            align='center'
            label="逝者姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="deadGender"
            align='center'
            label="逝者性别"
            width="120">
          </el-table-column>
          <el-table-column
            prop="certificateType"
            align='center'
            label="逝者证件类型"
            width="150">
          </el-table-column>
          <el-table-column
            prop="certificateNo"
            align='center'
            label="证件号码"
            width="200">
          </el-table-column>
          <el-table-column
            prop="deadAge"
            align='center'
            label="年龄"
            width="100">
          </el-table-column>
          <el-table-column
            prop="deathDate"
            align='center'
            label="死亡时间"
            width="150">
          </el-table-column>
          <el-table-column
            prop="deathCause"
            align='center'
            label="死亡原因"
            width="150">
          </el-table-column>
          <el-table-column
            prop="householdRegistrationPlace"
            align='center'
            label="户口所在地"
            width="120">
          </el-table-column>
          <el-table-column
            prop="contact"
            align='center'
            label="联系人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="contactPhone"
            align='center'
            label="联系电话"
            width="200">
          </el-table-column>
          <el-table-column
            prop="relation"
            align='center'
            label="联系人与逝者关系"
            width="200">
          </el-table-column>
          <el-table-column
            prop="benefitCharge"
            align='center'
            label="优惠金额"
            width="100">
          </el-table-column>
        </el-table>
        <div style="text-align: center;
                      height: 0px;
                      line-height: 20px;
                      font-size: 18px;">
          显示{{
            pager.total === 0 ? 0 : (Math.ceil(pager.total / pager.pageSize) > 1 ? ((pager.currentPage - 1) * pager.pageSize + 1) : (1))
          }}到{{
            pager.total === 0 ? 0 : ((Math.ceil(pager.total / pager.pageSize) === pager.currentPage) ? (pager.total) : (pager.currentPage * pager.pageSize))
          }}条
        </div>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import {dataFormatetmd} from '@/utils/index'
import * as Type from '@/api/service'
import download from "@/api/download"

export default {
  name: "Exeption",
  data() {
    return {
      loading: false,

      type: [],
      ruleForm: {
        "settleStartTime": "",
        "settleEndTime": "",
        "deadName": "",
        "certificateNo": "",
        "exemptionTypeCode": "",
        "pageSize": 0,
        "currentPage": 0,
        "exportExcelFlag": 0
      },
      pager: {
        "pageSize": 20,
        "total": 1,
        "currentPage": 1
      },
      tableData: [],
      dictionary: {},
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnExemptionSearch: true, //查询
        btnExemptionExport: true,//导出excel
      }
    }
  },//载入按钮
  mounted() {
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
    }
    this.$store.dispatch('user/getdictionary').then((res) => {     //获取字典数据
      this.dictionary = res;
      this.$set(this.dictionary, res)
    }).catch(() => console.log('promise catch err'))

    this.defaultValue();
    this.onSubmit()
    var that = this
    window.onresize = function () {
      var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
      that.tableHeight = dom - search - 110
    }
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  },
  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
      var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
      this.tableHeight = dom - search - 110
    })
  },
  methods: {
    //默认初始值方法
    defaultValue() {
      //默认查询开始结束时间为当天
      this.ruleForm.settleStartTime = dataFormatetmd(new Date());
      this.ruleForm.settleEndTime = dataFormatetmd(new Date());
    },

    onSubmit(value) {
      this.loading = true
      if (value) {
        this.pager.currentPage = 1;
      }
      var postData = {
        "settleStartTime": dataFormatetmd(new Date(this.ruleForm.settleStartTime)),
        "settleEndTime": dataFormatetmd(new Date(this.ruleForm.settleEndTime)),
        "deadName": this.ruleForm.deadName,
        "certificateNo": this.ruleForm.certificateNo,
        "exemptionTypeCode": this.ruleForm.exemptionTypeCode,
        "pageSize": this.pager.pageSize,
        "currentPage": this.pager.currentPage,
        "exportExcelFlag": 0,            //表示显示 1表示导出execl
        "orderField	": "",     //排序字段
        "orderType": ""        //排序顺序
      }

      //查询接口
      Type['loadExeption'](postData).then(response => {
        const {data} = response;
        if (!data) {
          this.loading = false;
          this.$message('数据读取失败')
          return
        }
        this.tableData = data.list
        this.pager = data.pager
        this.loading = false
        //   //数据读取成功
      }).catch(error => {
        this.$message(error)
        this.loading = false
        this.tableData = []
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ruleForm.settleStartTime = "";
      this.ruleForm.settleEndTime = "";
      this.$refs["ruleForm"].resetFields();
      this.onSubmit();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pager.pageSize = size;
      this.onSubmit()
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit()  //点击第几页
    },
    openExecl() {
      // window.location.href = "excel地址"
      var postData = {
        "settleStartTime": dataFormatetmd(new Date(this.ruleForm.settleStartTime)),
        "settleEndTime": dataFormatetmd(new Date(this.ruleForm.settleEndTime)),
        "deadName": this.ruleForm.deadName,
        "certificateNo": this.ruleForm.certificateNo,
        "exemptionTypeCode": this.ruleForm.exemptionTypeCode,
        "pageSize": this.pager.pageSize,
        "currentPage": this.pager.currentPage,
        "exportExcelFlag": 1,            //0表示显示 1表示导出execl
        "orderField	": "",     //排序字段
        "orderType": ""        //排序顺序
      }
      // 查询火化记录的接口
      download.exportExcel(Type["ExemptionEXPEXC"], postData, "减免统计_" + download.getDateTime() + ".xlsx");
    },
  }
}
</script>

<style scoped>

.w150 {
  width: 150px;
}
</style>
